<!---->
<template>
    <div class="chartCon-container">
        <div class="form-container">
             <span>数据类型:</span>
             <el-select v-model="selectVal" size="mini" placeholder="请选择" class="select-container" @change="handleSelectChange">
                 <el-option
                     v-for="item in options[sttp]"
                     :key="item.jctype"
                     :label="item.label"
                     :value="item.jctype"
                 >
                 </el-option>
             </el-select>
             <span>起止时间:</span>
             <el-date-picker
                 v-model="timeValue"
                 type="datetimerange"
                 range-separator="至"
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
                 class="data-picker-container"
                 size="mini"
                 @change="handleChangeDate"
             >
             </el-date-picker>
        </div>
        <div class="chart-container">
           <keep-alive>
             <component :is="componentName" :chartData="chartData"></component>
           </keep-alive>
           <!-- <LiuLiangChart v-if="componentName == 'LiuLiangChart'" :chartData="chartData"/>
           <YaLiChart v-if="componentName == 'YaLiChart'" :chartData="chartData"/> -->
         </div>
    </div>
 </template>
 
 <script>
     import LiuLiangChart from './Chart/LiuLiangChart.vue';
     import ShuiWeiChart from './Chart/ShuiWeiChart.vue';
     import YaLiChart from './Chart/YaLiChart.vue';
     import ShuiLiangChartVue from './Chart/ShuiLiangChart.vue';
     import { formatDateTime } from '@/until/untils';
     import { getPOIClickData } from "@/api/apiPOI";
     import { shuiChiList1, shuiChiList2 } from '@/js/ShuiChi';
 
     export default {
         name: '',
         components: {
             LiuLiangChart,
             ShuiWeiChart,
             YaLiChart,
             ShuiLiangChartVue
         },
         props: {
             paramsData: {
                 type: Object,
                 default: function () {
                 return {}
                 }
             },
         },
         watch: {
             paramsData: {
                 handler(newVal, oldVal) {
                     console.log("*****cahrtCon*********",newVal);
                     if(newVal && newVal.hasOwnProperty('sttp')){
                         let curDateF = null;
                         let preDateF = null;
                         // this.selectVal = this.options[newVal.sttp][0].label;
                         // let jctype = this.options[newVal.sttp][0].jctype;
                         this.deviceId = newVal.deviceId;
                         this.sttp = newVal.sttp;
                         //type为5时只展示水量
                         if(newVal.type && newVal.type == 5){
                             this.options[newVal.sttp] = [{
                                 jctype: '4',
                                 label: '水量',
                                 componentName: 'ShuiLiangChartVue',
                             }]
                             this.selectVal = this.options[newVal.sttp][0].label;
                             let curDate = new Date();
                             let pDate = new Date(curDate.getTime() - 15*24*60*60*1000); //前一天
                             curDateF = formatDateTime(curDate, 'yyyy-MM-dd HH:mm');
                             preDateF = formatDateTime(pDate, 'yyyy-MM-dd HH:mm');
                             //获取前一天具体日期如下
                             this.timeValue.push(preDateF);
                             this.timeValue.push(curDateF);
                            //  this.timeValue = [preDateF, curDateF];
                         }else{
                             let curDate = new Date();
                             let pDate = new Date(curDate.getTime() - 2*60*60*1000); //前一天
                             curDateF = formatDateTime(curDate, 'yyyy-MM-dd HH:mm');
                             preDateF = formatDateTime(pDate, 'yyyy-MM-dd HH:mm');
                             //获取前一天具体日期如下
                             this.timeValue = [preDateF, curDateF];
                             //蓄水池
                             if(newVal.sttp == 2 ){
                             // debugger
                                 const res01 = shuiChiList1.find(item => item == newVal.deviceId); //只有水位和压力
                                 if(res01 != undefined){
                                 this.options[newVal.sttp] = [{
                                         jctype: '3',
                                         label: '水位',
                                         componentName: 'ShuiWeiChart',
                                     },{
                                         jctype: '2',
                                         label: '压力',
                                         componentName: 'YaLiChart',
                                     }]
                                 }
                                 const res02 = shuiChiList2.find(item => item == newVal.deviceId); //只有水位
                                 if(res02 != undefined){
                                 this.options[newVal.sttp] = [{
                                         jctype: '3',
                                         label: '水位',
                                         componentName: 'ShuiWeiChart',
                                     }]
                                 }
                                 if(res01 == undefined && res02 == undefined) {
                                     this.options[newVal.sttp] =[
                                     {
                                         jctype: '4',
                                         label: '水量',
                                         componentName: 'ShuiLiangChartVue',
                                     }, 
                                     {
                                         jctype: '3',
                                         label: '水位',
                                         componentName: 'ShuiWeiChart',
                                     },{
                                         jctype: '2',
                                         label: '压力',
                                         componentName: 'YaLiChart',
                                     }]
                                 }
                                 this.selectVal = this.options[newVal.sttp][0].label;
                             }else {
                                 this.options = {
                                     // 0 => 分界监控点
                                     0: [
                                     {
                                         jctype: '4',
                                         label: '水量',
                                         componentName: 'ShuiLiangChartVue',
                                     },
                                     {
                                         jctype: '1',
                                         label: '流量',
                                         componentName: 'LiuLiangChart',
                                     }, {
                                         jctype: '2',
                                         label: '压力',
                                         componentName: 'YaLiChart',
                                     }],
                                     // 1 =》 非分界监控点
                                     1: [
                                     {
                                         jctype: '4',
                                         label: '水量',
                                         componentName: 'ShuiLiangChartVue',
                                     },
                                     {
                                         jctype: '1',
                                         label: '流量',
                                         componentName: 'LiuLiangChart',
                                     }, {
                                         jctype: '2',
                                         label: '压力',
                                         componentName: 'YaLiChart',
                                     }],
                                     // 2=》 蓄水池
                                     2: [
                                     {
                                         jctype: '4',
                                         label: '水量',
                                         componentName: 'ShuiLiangChartVue',
                                     }, 
                                     {
                                         jctype: '3',
                                         label: '水位',
                                         componentName: 'ShuiWeiChart',
                                     },{
                                         jctype: '2',
                                         label: '压力',
                                         componentName: 'YaLiChart',
                                     }],
                                     //3 =》 泵站
                                     3: [  {
                                         jctype: '1',
                                         label: '流量',
                                         componentName: 'LiuLiangChart',
                                     }, {
                                         jctype: '3',
                                         label: '水位',
                                         componentName: 'ShuiWeiChart',
                                     },{
                                         jctype: '2',
                                         label: '压力',
                                         componentName: 'YaLiChart',
                                     }], 
                                 }
                                 this.selectVal = this.options[newVal.sttp][0].label;
                             }
 
                         }
                         let jctype = this.options[newVal.sttp][0].jctype;
                         this.componentName = this.options[newVal.sttp][0].componentName;
                         getPOIClickData({deviceId:newVal.deviceId, sttp: newVal.sttp, jctype, startTime: preDateF, endTime: curDateF}).then(res => {
                             let paramType = (value, type) => Object.prototype.toString.call(value).includes(type);
                             if( paramType(res, 'Object')){
                                 this.chartData = res;
                             }
                         })
                     }
                 },
                 immediate:true
             }
         },
         // computed: {
         //     myOptions() {
         //         return this.$store.getters.maptype;
         //     }
         // },
         data() {
             return {
                 selectVal: '流量',
                 timeValue: [],
                 chartData: {},
                 componentName: 'LiuLiangChart',
                 sttp: 0,
                 deviceId: '907926175',
                 jctype: '1',
                 //jctype: 1=>流量，2=>压力，3=>水位,4=>水量
                 //sttp: 0 => 分界监控点， 1 =》 非分界监控点， 2=》 蓄水池， 3 =》 泵站
                 options: {
                     // 0 => 分界监控点
                     0: [
                     {
                         jctype: '4',
                         label: '水量',
                         componentName: 'ShuiLiangChart',
                     },
                     {
                         jctype: '1',
                         label: '流量',
                         componentName: 'LiuLiangChart',
                     }, {
                         jctype: '2',
                         label: '压力',
                         componentName: 'YaLiChart',
                     },
                     {
                         jctype: '3',
                         label: '水位',
                         componentName: 'ShuiWeiChart',
                     }],
                     // 1 =》 非分界监控点
                     1: [
                     {
                         jctype: '4',
                         label: '水量',
                         componentName: 'LiuLiangChart',
                     },
                     {
                         jctype: '1',
                         label: '流量',
                         componentName: 'LiuLiangChart',
                     }, {
                         jctype: '2',
                         label: '压力',
                         componentName: 'YaLiChart',
                     }],
                     // 2=》 蓄水池
                     2: [ 
                     {
                         jctype: '4',
                         label: '水量',
                         componentName: 'LiuLiangChart',
                     },
                     {
                         jctype: '3',
                         label: '水位',
                         componentName: 'ShuiWeiChart',
                     },{
                         jctype: '2',
                         label: '压力',
                         componentName: 'YaLiChart',
                     }],
                     //3 =》 泵站
                     3: [ {
                         jctype: '1',
                         label: '流量',
                         componentName: 'LiuLiangChart',
                     }, {
                         jctype: '3',
                         label: '水位',
                         componentName: 'ShuiWeiChart',
                     },{
                         jctype: '2',
                         label: '压力',
                         componentName: 'YaLiChart',
                     }],
                 },
                 
             }
         },
         computed:{},
         created(){
             let curDate = new Date();
             var nowDate = curDate.getTime();
             var preDate = new Date(curDate.getTime() - 2*60*60*1000); //前一天
             // var nextDate = new Date(curDate.getTime() + 24*60*60*1000); //后一天
             console.log(formatDateTime(curDate, 'yyyy-MM-dd HH:mm'));
             console.log(formatDateTime(preDate, 'yyyy-MM-dd HH:mm'));
             //获取前一天具体日期如下
            //  this.timeValue = [formatDateTime(preDate, 'yyyy-MM-dd HH:mm'), formatDateTime(curDate, 'yyyy-MM-dd HH:mm')];
             this.selectVal = this.options[this.sttp][0].label;
 
         },
         mounted(){},
         filters: {},
         methods: {
             handleSelectChange(secVal) {
                 this.options[this.sttp].forEach(element => {
                     if(element.jctype == secVal) {
                         console.log('==handleSelectChange==',secVal);
                         this.componentName = element.componentName;
                         this.jctype = secVal;
                         this.getPOIClickData({deviceId:this.deviceId, sttp: this.sttp, jctype:secVal, startTime: this.timeValue[0], endTime: this.timeValue[1]});
                     }
 
                 });
             },
 
             handleChangeDate(value) {
                 console.log('==handleChangeDate==',value);
                 this.getPOIClickData({deviceId:this.deviceId, sttp: this.sttp, jctype:this.jctype, startTime: formatDateTime(value[0], 'yyyy-MM-dd HH:mm:ss'), endTime: formatDateTime(value[1], 'yyyy-MM-dd HH:mm:ss')});
             },
             getPOIClickData(params) {
                 console.log("==========");
                 getPOIClickData(params).then(res => {
                     let paramType = (value, type) => Object.prototype.toString.call(value).includes(type);
                     if( paramType(res, 'Object')){
                         this.chartData = res;
                     }
                 })
             },
 
         },
     }
 </script>
 
 <style lang="scss" scoped>
    .chartCon-container {
         background-color: rgba($color: #e65555, $alpha: 0);
         width: 520px;
         height: 180px;
        //  height: 200px;
 
         .form-container {
             display: flex;
             flex-direction: row;
             justify-content: space-around;
             align-items: center;
 
             span {
                 font-family: SourceHanSansCN-Regular;
                 font-size: 12px;
                 font-weight: normal;
                 font-stretch: normal;
                 line-height: 44px;
                 letter-spacing: 0px;
                 color: #93a3ae; 
             }
 
             .select-container {
                 width: 90px;
                 background-color: transparent;
 
             }
 
         }
 
         .chart-container {
            background-color: rgba($color: #19e041, $alpha: 0);
            height: 140px;
         }
    }
 
 
 
    .data-picker-container {
         width: 296px;
         // background-color: transparent;
    }
 
 
 </style>